<script lang="tsx" name="SelectUser">
  /**
   *  用户搜索自定义显示效果 公共
   * @property {Boolean} props desc info
   * @example <SelectUser />
   */
  import { defineComponent, computed, ref, watch, toValue } from 'vue';

  /**
   * 用户数据接口
   */
  interface UserItem {
    userId: number | string;
    nickName: string;
    phonenumber: string;
    [key: string]: any;
  }

  const listUser = function (params: any) {
    return new Promise((resolve) => {
      resolve({
        rows: [],
      });
    });
  };
  export default defineComponent({
    name: 'SelectUser',

    inheritAttrs: true,
    props: {
      modelValue: {
        type: [String, Number, Array],
        default: undefined,
      },

      labelField: {
        type: String,
        default: 'label',
      },
      valueField: {
        type: String,
        default: 'value',
      },
    },

    emits: ['update:modelValue'],
    setup(props, cxt) {
      const value = ref(props.modelValue);
      watch(
        () => value.value,
        (val) => {
          cxt.emit('update:modelValue', toValue(val));
        },
        {
          immediate: true,
        },
      );
      const userOptions = ref<UserItem[]>([]);
      const loading = ref(false);
      const remoteMethod = (e: any) => {
        loading.value = true;
        return new Promise((_, reject) => {
          listUser({
            pageSize: 1000,
            userType: 2,
            pageNum: 1,
            userName: e,
          })
            .then((res: any) => {
              userOptions.value = res.rows.map((e: any) => ({
                label: e.nickName + ' / ' + e.phonenumber,
                value: e.userId,
                ...e,
              }));
            })
            .catch((e) => {
              reject(e);
            })
            .finally(() => {
              loading.value = false;
            });
        });
      };
      const bindProps = computed(() => {
        return {
          options: userOptions.value,
          loading: loading.value,
          popperClass: 'selectPopperClass',
          placeholder: '请选择用户',
          clearable: true,
          filterable: true,
          remote: true,
          reserveKeyword: true,
          remoteShowSuffix: true,
          remoteMethod,
        };
      });

      // 下拉选项显示状态
      const optionVisible = ref(false);

      return { value, bindProps, optionVisible };
    },
  });
</script>
<template>
  <el-select
    v-model="value"
    v-bind="Object.assign({}, bindProps, $props, $attrs)"
    @visible-change="(val) => (optionVisible = val)"
  >
    <el-option
      v-for="item in bindProps.options"
      :label="item[labelField]"
      :value="item[valueField]"
      :key="item[valueField]"
    >
      <div style="height: 100px" class="user-option">
        <div>
          <div class="user-info">
            <span class="user-label">姓名：</span>
            <span class="user-value">{{ item.nickName }}</span>
          </div>
          <div class="user-info">
            <span class="user-label">手机号：</span>
            <span class="user-value">{{ item.phonenumber }}</span>
          </div>
        </div>
      </div>
    </el-option>
  </el-select>
</template>

<style scoped>
  @keyframes drop-down {
    0% {
      transform: translateY(-10px);
      opacity: 0;
    }

    100% {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .user-option {
    transform-origin: center;
    transition: all 0.3s ease-in-out;
    opacity: 1;
  }

  .user-info {
    display: flex;
    align-items: center;
    margin: 5px 0;
  }

  .user-label {
    margin-right: 5px;
    color: #666;
  }

  .user-value {
    color: #333;
    font-weight: 500;
  }

  :deep(.el-select-dropdown__item) {
    padding: 0 10px;
  }

  :deep(.el-select-dropdown__item.hover) {
    background-color: rgb(22 93 255 / 10%);
  }

  /* 进入动画 */
  :deep(.el-select-dropdown.is-multiple .el-select-dropdown__wrap) {
    transition:
      opacity 0.3s,
      transform 0.3s;
  }

  :deep(.el-select-dropdown.el-popper) {
    animation: drop-down 0.3s ease-in-out;
  }
</style>
